<template>
  <basic-container :btnFlag=true>
    <div class="card-border">
      <card-header :header-data="headerData"></card-header>
      <el-form
        label-width="130px"
        :model="opinionForm"
        style="padding-right: 30px;"
        :rules="hasOpinionFlag?opinionRules:notOpinionRules"
        ref="opinionForm"
      >
        <el-row>
          <el-col :span="11">
            <el-form-item class="form-item-release" label="意见类型 :" prop="hasOpinion">
              <!-- <el-radio v-model="opinionForm.hasOpinion" label="0">无意见</el-radio> -->
              <el-radio v-model="opinionForm.hasOpinion" label="1">修改意见</el-radio>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="11">
            <el-form-item class="form-item-release" label="意见 :" prop="opinion">
              <el-input
                type="textarea"
                :autosize="{ minRows: 4, maxRows: 4}"
                placeholder="请输入意见"
                v-model="opinionForm.opinion"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="11">
            <el-form-item class="form-item-release" label="联系人 :" prop="contactName">
              <el-input
                v-model="opinionForm.contactName"
                placeholder="请输入联系人"
                style="width: 280px"
              >
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="11">
            <el-form-item class="form-item-release" label="联系电话 :" prop="contactNumber">
              <el-input
                v-model="opinionForm.contactNumber"
                placeholder="请输入联系电话"
                style="width: 280px"
              >
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div class="form-group-file" style="margin-top:12px;" v-if="toDoOrnot=='0'">
        <span class="form-label-file">相关材料:</span>
        <el-upload
          class="upload-demo"
          action="string"
          :http-request="fileUploadRequest"
          :on-preview="fileHandlePreview"
          :on-remove="fileHandleRemove"
          :file-list="fileTypeIds['相关材料']"
          :auto-upload="true">
          <el-button slot="trigger" size="small" type="primary">点击上传</el-button>
        </el-upload>
      </div>
      <div style="margin-top: 18px;margin-left: 82px;" v-if="toDoOrnot=='1'">
        <p class="" style="float:left;font-weight: 600;margin-bottom: 0px;">附件 ：</p>
        <div v-for="(file,index) in files" :key="index" class="relateddiv">
          <el-tooltip class="item" effect="dark" content="下载资料" placement="top-start">
            <el-button class="downbtn" @click="fileDownload(file.fileId,file.fileName)">
              <img src="img/download-blue.png" class="detail-data-img"/><span>下载</span>
            </el-button>
          </el-tooltip>
          <p class="detail-data-file" v-if="file.fileName">{{file.fileName}}</p>
        </div>
        <p class="detail-data-file" v-if="files.length==0">无</p>
      </div>
      <div class="form-submit" v-if="toDoOrnot=='0'">
        <el-button type="primary" @click.stop="updateForm()">提交</el-button>
        <el-button type="info" @click.stop="goBack()">关闭</el-button>
      </div>
      <el-collapse v-model="activeNames" style="margin-top:2rem;">
        <el-collapse-item name="targetLog">
          <template slot="title">
            <div class="card-header collapse-header">
              <div class="head-title collapse-title">转办信息</div>
            </div>
          </template>
          <div>
            <target-log-for-current-user :targetId="parseInt(targetId)"></target-log-for-current-user>
          </div>
        </el-collapse-item>
        <el-collapse-item name="2" v-if="typeControlDetail=='1'">
          <template slot="title">
            <div class="card-header collapse-header">
              <div class="head-title collapse-title">课题计划</div>
            </div>
          </template>
          <div style="float: right;margin:8px 9px -2px 0px">
            <el-button type="success" size="mini" @click="exportPlanFile()">导出计划</el-button>
          </div>
          <div>
            <avue-crud :data="subjectListData"
                       :option="tableoption"
                       :page="page"
                       :table-loading="tableLoading"
                       @on-load="getResultList"
                       @size-change="sizeChange"
                       @current-change="currentChange"
                       class="avuecrud">
            </avue-crud>
          </div>
        </el-collapse-item>
        <el-collapse-item name="1">
          <template slot="title">
            <div class="card-header collapse-header">
              <div class="head-title collapse-title">意见征求信息</div>
            </div>
          </template>
          <div>
            <!--<bostech-detail :detail-data="opinionDetailData"></bostech-detail>-->
            <opinion-detail :opinionId="$route.params.id"></opinion-detail>
          </div>
        </el-collapse-item>
      </el-collapse>
      <el-dialog title="规划详情" :visible.sync="detailDialogVisible" width="70%">
        <bostech-detail :detail-data="detailData"></bostech-detail>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click.stop="detailDialogVisible == false">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </basic-container>
</template>

<script>
  import {getOpinion, planFormOpinion, formOpinion} from "@/api/opinion";
  import getOpinionDetail from "@/mixins/opinion/getOpinionDetail";
  import fileTypeMixin from "@/mixins/fileTypeMixin";
  import {getFileTypeFiles, getNotNull} from '@/views/util'
  import getResultDetailData from "@/mixins/planning/getResultDetailData";
  import {getPlanSubjectList,exportSubjectAssignDept} from "@/api/subject";
  import opinionDetail from "@/components/opinion/detail"

  //转办信息
  import targetLogForCurrentUser from "@/components/opinion/targetLogForCurrentUser.vue";

  export default {
    name: "opinionBackPlan",
    mixins: [fileTypeMixin, getOpinionDetail(), getResultDetailData()],
    components: {
      opinionDetail,
      targetLogForCurrentUser
    },
    created() {
      // this.getDetailData_opinion(this.$route.params.id);
      this.toDoOrnot = this.$route.query.toDoOrnot;
      this.state = this.$route.query.state;
      this.title = this.$route.query.title;
      this.typeControlDetail = this.$route.query.typeControlDetail;
      if (this.$route.query.type == '1') {
        this.getResultList()
      }
      if (this.$route.query.toDoOrnot != undefined && this.$route.query.toDoOrnot == '1') {
        this.putFeedbackForm();
      }
      this.targetId = this.$route.query.targetId;
    },
    data() {
      return {
        targetId: null,
        headerData: {
          title: '课题计划意见征求反馈'
        },
        typeControlDetail: '',
        fileType: '相关材料',
        // 当前的表单信息
        formContentHtml: '',
        detailData: [],
        activeNames: ['1', '2', 'targetLog'],
        toDoOrnot: '0',
        state: '',
        files: [],
        title: '',//对应类型名称
        btnName: '',
        detailDialogVisible: false,
        assignDeptDetailData: [],
        opinionForm: {
          hasOpinion: '1',
          contactName: '',
          contactNumber: '',
          opinion: '',
        },
        hasOpinionFlag: true,
        opinionRules: {
          opinion: [
            {required: true, message: "请输入意见", trigger: "blur"}
          ],
          contactName: [
            {required: true, message: "请输入联系人", trigger: "blur"}
          ],
          contactNumber: [
            {required: true, message: "请输入联系电话", trigger: "blur"}
          ],
        },
        notOpinionRules: {
          opinion: [
            {required: false}
          ],
          contactName: [
            {required: true, message: "请输入联系人", trigger: "blur"}
          ],
          contactNumber: [
            {required: true, message: "请输入联系电话", trigger: "blur"}
          ],
        },
        subjectListData: [],
        page: {
          total: 0, // 总页数
          currentPage: 1, // 当前页数
          pageSize: 10 // 每页显示多少条
        },
        tableLoading: false,
        tableoption: {
          page: true,
          menuWidth: 220,
          addBtn: false,
          editBtn: false,
          addRowBtn: false,
          indexLabel: "序号",
          index: true,
          indexWidth:70,
          cellBtn: false,
          delBtn: false,
          columnBtn: false,
          refreshBtn: false,
          filterBtn: false,
          searchBtn: false,
          keyId: "id",
          menu: false,
          column: [
            {
              label: "课题名称",
              width: 250,
              prop: "title",
              cell: true
            },
            {
              label: "课题概述",
              width: 330,
              prop: "description",
              cell: true
            },
            {
              label: "拟牵头单位",
              prop: "deptName",
              cell: true,
            },
            {
              label: "拟配合单位",
              prop: "supportDeptName",
              cell: true,
            },
          ]
        },
      }
    },
    watch: {
      'opinionForm.hasOpinion'(val) {
        if (val == '0') {
          this.hasOpinionFlag = false
        }
        if (val == '1') {
          this.hasOpinionFlag = true
        }
      }
    },
    methods: {
      goBack() {
        this.$router.go(-1);
      },
      // 更新表单信息
      updateForm() {
        this.planForm();
      },
      // 课题计划 表单提交
      planForm() {
        this.$refs.opinionForm.validate(valid => {
          if (valid) {
            this.$confirm("确定提交反馈么?", "提示", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning"
            }).then(() => {
              let fileIds = this.getFileIds(this.fileTypeIds[this.fileType]);
              this.opinionForm.hasOpinion = parseInt(this.opinionForm.hasOpinion);
              this.opinionForm.targetId = this.$route.query.targetId;
              this.opinionForm.fileIds = fileIds;
              planFormOpinion(this.opinionForm).then(response => {
                if (response.data.code == 0) {
                  this.$notify({
                    title: '成功',
                    message: '提交成功',
                    type: 'success',
                    duration: 2000
                  });
                  this.$router.go(-1);
                }
              })
            })
          }
        })
      },
      currentChange(currentPage) {
        var page = this.page;
        page.currentPage = currentPage;
        this.getResultListPage(page);
      },
      sizeChange(pageSize) {
        var page = this.page;
        page.pageSize = pageSize;
        this.getResultListPage(page);
      },
      getResultListPage(page) {
        getPlanSubjectList(Object.assign({
          current: page.currentPage,
          size: page.pageSize,
          planId: this.$route.query.relateId,
        })).then(response => {
          this.subjectListData = response.data.data.records;
          this.page.total = response.data.data.total;
        })
      },
      getResultList() {
        getPlanSubjectList(Object.assign({
          current: 1,
          size: 10,
          planId: this.$route.query.relateId,
        })).then(response => {
          this.subjectListData = response.data.data.records;
          this.page.total = response.data.data.total;
        })
      },
      //从已办进入，查看当前部门自己反馈的表单
      putFeedbackForm() {
        formOpinion(Object.assign({
          opinionId: this.$route.params.id,
          targetId: this.$route.query.targetId,
        })).then(async response => {
          var records = response.data.data.records[0];
          this.opinionForm.contactName = records.contactName;
          this.opinionForm.contactNumber = records.contactNumber;
          this.opinionForm.opinion = records.opinion;
          if (records.hasOpinion) {
            this.opinionForm.hasOpinion = '1'
          } else {
            this.opinionForm.hasOpinion = '0'
          }
          if (records.fileIds != null) {
            if (records.fileIds.length != 0) {
              this.files = await getFileTypeFiles(records.fileIds);
            }
          }
        });
      },
      exportPlanFile() {
        this.$confirm("确定要导出计划吗?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          exportSubjectAssignDept(this.$route.query.relateId).then(response => {
            var exportFileName ="课题计划方案.docx";
            this.download(response.data, exportFileName)
          });
        })
      },
      // 下载文件
      download(data, filename) {
        if (data == null) {

        } else {
          let url = window.URL.createObjectURL(new Blob([data]));
          let link = document.createElement('a');
          link.style.display = 'none';
          link.href = url;
          link.setAttribute('download', filename);
          document.body.appendChild(link);
          link.click()
        }
      },



    },
  }
</script>

<style lang="scss" scoped>
</style>


